<template>
  <div id="app">
    <div class="view-container">
      <div class="main-header-box">
        <header class="main-header">
          <div class="container">
            <a class="logo">
              <img
                class="logo-img"
                src="@/images/logo.svg"
              />
            </a>
            <nav class="main-nav">
              <ul class="nav-list">

                <li class="main-nav-list">
                  <ul class="phone-hide">
                    <!-- 渲染数据，绑定点击变色FirstStyle事件 -->
                    <li
                      @click="FirstStyle(index)"
                      class="nav-item link-item"
                      v-for="(item, index) in FirstMenu"
                      :key="item.id"
                    >
                      <router-link
                        :NavId="secondNav"
                        :to="item.path"
                        :pathList="item.CourseList"
                        :class="
                          index === num
                            ? 'normal routes active'
                            : 'normal routes'
                        "
                      >{{ item.detail }}</router-link>
                    </li>
                    <!-- 没有点击效果的链接 -->
                    <li class="nav-item link-item">
                      <a class="routes">商城</a>
                    </li>
                    <li class="nav-item link-item">
                      <a class="routes">APP</a>
                    </li>
                    <li class="nav-item link-item">
                      <a class="routes">插件</a>
                    </li>
                  </ul>
                </li>
                <div class="nav">
                  <div class="serach">
                    <label for="search"></label>
                    <input
                      type="search"
                      class="search"
                      id="search"
                      placeholder="搜索稀土掘金"
                    />
                    <div class="search-button">
                      <img
                        src="./static/photo/search.png"
                        alt=""
                      />
                    </div>
                    <div class="creator">
                      <div class="creator-left">创作者中心</div>
                      <div class="creator-right">▼</div>
                    </div>

                    <div class="vip">
                      <div class="vip-photo">
                        <img
                          src="./static/photo/viplogo.png"
                          alt=""
                        />
                      </div>
                      <div class="vip-name">会员</div>
                    </div>

                    <div class="loggin">登录</div>
                  </div>
                </div>
              </ul>
            </nav>
          </div>
        </header>
        <div class="rightfunction">
          <div class="rightfunction-1">
            <div class="rightfuncion-1-calandar">
              <img
                src="./static/photo/calandar.png"
                alt=""
              />
            </div>
            <div class="rightfuncion-1-time">晚上好！</div>
            <div class="rightfuncion-1-sign">去签到</div>
            <div class="rightfuncion-1-tip">点亮你在社区的每一天</div>
          </div>
          <div class="rightfunction-2">
            <a
              target="_blank"
              href="https://juejin.cn/book/7117582869358182403?utm_source=web_banner&utm_medium=banner&utm_campaign=Book_zjk_0803"
            >
              <img
                src="./static/photo/advertisement.png"
                alt=""
              />
            </a>
          </div>
          <div class="rightfunction-3">
            <a
              target="_blank"
              href="https://juejin.cn/app"
            >
              <img
                src="./static/photo/code.png"
                alt=""
              />
            </a>
          </div>
          <div class="rightfunction-4">
            <div class="rightfunction-4-wiriter">🎖️作者榜</div>
            <div class="rightfunction-4-people">
              <a
                target="_blank"
                href="https://juejin.cn/user/3263764828006760"
              >
                <img
                  src="./static/photo/people1.png"
                  alt=""
                />
              </a>
              <a
                target="_blank"
                href="https://juejin.cn/user/4494459266409912"
              >
                <img
                  src="./static/photo/people2.png"
                  alt=""
                />
              </a>
              <a
                target="_blank"
                href="https://juejin.cn/user/554605767047053"
              >
                <img
                  src="./static/photo/people3.png"
                  alt=""
                />
              </a>
            </div>
            <div class="rightfunction-4-item">
              <a
                target="_blank"
                href="https://juejin.cn/recommendation/authors/recommended"
              >完整榜单 ></a>
            </div>
          </div>

          <div class="rightfunction-5">
            <a
              href="https://juejin.cn/book/6844733795329900551"
              target="_blank"
            >
              <img
                src="./static/photo/plug1.jpg"
                alt=""
              />
            </a>
            <a
              href="https://juejin.cn/extension"
              target="_blank"
            >
              <img
                src="./static/photo/plug2.jpg"
                alt=""
              />
            </a>
            <a
              href="https://github.com/xitu/gold-miner"
              target="_blank"
            >
              <img
                src="./static/photo/plug3.jpg"
                alt=""
              />
            </a>
          </div>
          <div class="rightfunction-6">
            <a
              target="_blank"
              href="https://lf3-cdn-tos.draftstatic.com/obj/ies-hotsoon-draft/juejin/86857833-55f6-4d9e-9897-45cfe9a42be4.html"
            >用户协议</a>
            <a
              target="_blank"
              href="https://juejin.cn/license"
            >营业执照</a>
            <a
              target="_blank"
              href="https://lf3-cdn-tos.draftstatic.com/obj/ies-hotsoon-draft/juejin/7b28b328-1ae4-4781-8d46-430fef1b872e.html"
            >隐私政策</a>
            <a
              target="_blank"
              href="https://juejin.cn/about"
            >关于我们</a><br />
            <a
              target="_blank"
              href="https://juejin.cn/map-author-A-1"
            >站点地图</a>
            <a
              target="_blank"
              href="https://juejin.cn/book/6844733795329900551"
            >使用指南</a>
            <a
              target="_blank"
              href="https://juejin.cn/links"
            >友情链接</a>
            <a
              target="_blank"
              href="https://juejin.cn/more_posts"
            >更多文章</a><br />
            <a
              target="_blank"
              href="https://beian.miit.gov.cn/#/Integrated/index"
            >京ICP备18012699号-3</a><br />
            <a
              target="_blank"
              href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802026719"
            >
              <img
                src="./static/photo/police.png"
                alt=""
              />
              京公网安备11010802026719号 </a><br />
            <div>版权所有：北京北比信息技术有限公司</div>
            <div>公司地址：北京市海淀区信息路甲28号13层B座13B-5</div>
            <div>公司座机：010-83434395</div>
            <div>
              举报邮箱：
              <a
                target="_blank"
                href=""
              >feedback@xitu.io</a>
            </div>
            <a href=""> ©2022 稀土掘金 </a>
          </div>
          <div class="rightfunction-7">
            <a
              target="_blank"
              href="https://passport.weibo.com/visitor/visitor?entry=miniblog&a=enter&url=https%3A%2F%2Fweibo.com%2Fxitucircle&domain=.weibo.com&ua=php-sso_sdk_client-0.6.36&_rand=1660139056.9579"
            >
              <img
                src="./static/photo/weibo.png"
                alt=""
              />
            </a>
            <img
              target="_blank"
              src="./static/photo/wechat.png"
              alt=""
            />
          </div>
        </div>
        <div class="float">
          <a href="https://juejin.cn/editor/drafts/new?v=2">
            <img
              src="./static/photo/floatpart1.png"
              alt=""
            />
          </a>
          <a href="">
            <img
              src="./static/photo/floatpart2.jpg"
              alt=""
            />
          </a>
          <a href="https://code.juejin.cn/">
            <img
              src="./static/photo/floatpart3jpg.jpg"
              alt=""
            />
          </a>
        </div>
        <router-view ref="secondNav"></router-view>
      </div>
    </div>
  </div>
</template>


<script scoped>
export default {
  name: "NavBar",
  data() {
    return {
      num: 0,
      secondNav: 0,
      //一级路由数据
      FirstMenu: [
        { id: 0, path: "/", detail: "首页" },
        { id: 1, path: "/pins", detail: "沸点" },
        { id: 2, path: "/course", detail: "课程" },
        { id: 3, path: "/live", detail: "直播" },
        { id: 4, path: "/event", detail: "活动" },
      ],
    };
  },
  methods: {
    FirstStyle(index) {
      this.num = index;
      //切换一级路由时，二级路由选项样式默认置为0
      this.$refs.secondNav.styleIndex = 0;
    },
  },
};
</script>

<style>
html,
body {
  font-size: 12px;
  line-height: normal;
  background-color: rgb(244, 245, 245);
}

body,
html {
  font-family: -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell,
    Noto Sans, sans-serif, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Arial !important;
}

a,
button,
input {
  margin: 0;
}

body {
  background-color: rgb(244, 245, 245);
  word-break: break-word;
}

.view-container {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
}

header,
nav {
  display: block;
}

.main-header-box {
  position: relative;
  height: 5rem;
}

.main-header {
  border-bottom: 1px solid #f1f1f1;
  color: #909090;
  background-color: #fff;
  height: 5rem;
  z-index: 250;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.2s;
  /* scroll到指定位置隐藏header */
  /* transform: translate3d(0, -100%, 0); */
}

.container {
  display: flex;
  align-items: center;
  height: 100%;
  padding-left: 24px;
}

.main-header .container {
  margin: auto;
  max-width: 1440px;
  padding: 0;
}

.logo {
  margin-right: 1rem;
  margin-left: 24px;
  display: inline-block;
  height: 22px;
  width: auto;
}

.logo-img {
  display: block;
  width: 107px;
  height: 22px;
  cursor: pointer;
}

img {
  border-style: none;
}

.main-nav {
  height: 100%;
  flex: 1 0 auto;
}

.nav-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  /* flex-direction: row-reverse; */
  height: 100%;
  padding: 0;
  margin: 0;
}

ul,
li {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

.phone-hide {
  display: flex;
  padding: 0;
}

.nav-item {
  color: #86909c;
  padding: 0 1rem;
  font-size: 1.167rem;
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.nav-item.link-item {
  padding: 0;
}

.phone-hide .nav-item.link-item a:not(.no-hover) {
  display: inline-block;
  height: 5rem;
  margin: 0 1rem;
  line-height: 5rem;
}

.nav-item a {
  color: #515767;
  position: relative;
}
/* 前五个有下方蓝色边框显示 */
.nav-item a:hover {
  color: black;
}
.nav-item a.normal:hover {
  color: black;
  /* 标准盒子模型 */
  box-sizing: border-box;
  border-bottom: 2px solid #1e80ff;
}

.routes {
  text-decoration: none;
}

.routes.active {
  color: #1e80ff;
}
.search {
  width: 280px;
  height: 38px;
  margin-top: 11px;
  margin-right: 300px;
  border-radius: 5px;
  border-width: 1px;
  border-color: rgb(194, 200, 209);
  border-width: 1px;
}

.search:hover {
  border-color: black;
}

.search-button {
  width: 24px;
  height: 24px;
  left: 960px;
  top: 24px;
  position: absolute;
  background-color: rgb(242, 243, 245);
}

.search-button:hover {
  cursor: pointer;
}

.creator {
  width: 220px;
  height: 36px;
  position: absolute;
  left: 965px;
  top: 18px;

  display: inline-block;
}

.creator-left {
  width: 100px;
  height: 36px;
  background-color: rgb(30, 128, 255);
  display: inline-block;
  border-radius: 3px;
  text-align: center;
  line-height: 36px;
  color: white;
  margin-right: -4px;
}

.creator-right {
  width: 25px;
  height: 36px;
  background-color: rgb(30, 128, 255);
  display: inline-block;
  border-radius: 3px;
  line-height: 36px;
  color: white;
  text-align: center;
}

.creator-left:hover {
  cursor: pointer;
  background-color: #1171ee;
}

.creator-right:hover {
  cursor: pointer;
  background-color: #1171ee;
}

.vip {
  width: 85px;
  height: 45px;
  position: absolute;
  left: 1120px;
  top: 25px;
}

.vip-photo {
  display: inline-block;
}

.vip-name {
  display: inline-block;
  color: #869ec6;
  font-size: 14px;
  position: absolute;
  top: 4px;
}

.vip-photo:hover {
  cursor: pointer;
}

.vip-name:hover {
  cursor: pointer;
}

.loggin {
  width: 66px;
  height: 36px;
  background-color: #f4f9ff;
  color: #2e89ff;
  text-align: center;
  line-height: 36px;
  font-size: 14px;
  border-color: #2e89ff;
  border-width: 0.5px;
  border-style: solid;
  position: absolute;
  left: 1220px;
  top: 20px;
  border-radius: 3px;
}

.loggin:hover {
  cursor: pointer;
}

.rightfunction {
  width: 240px;
  height: 3000px;
  /* background-color: aqua; */
  position: absolute;
  left: 720px;
  top: 52px;
}

.rightfunction-1 {
  width: 240px;
  height: 96px;
  margin-bottom: 16px;
  background-color: white;
  /* border-style: solid;
    border-width: 1px; */
  border-radius: 3px;
}

.rightfuncion-1-calandar > img {
  display: inline-block;
  position: absolute;
  left: 14px;
  top: 12px;
}

.rightfuncion-1-time {
  display: inline-block;
  position: absolute;
  left: 57px;
  top: 16px;
  font-size: 18px;
  color: #1d2129;
}

.rightfuncion-1-sign {
  width: 72px;
  height: 32px;
  color: #1e80ff;
  border-style: solid;
  border-width: 1px;
  border-radius: 50px;
  display: inline-block;
  position: absolute;
  left: 147px;
  top: 16px;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
}

.rightfuncion-1-sign:hover {
  cursor: pointer;
  background-color: #e8f3ff;
}

.rightfuncion-1-tip {
  display: inline-block;
  position: absolute;
  left: 59px;
  top: 55px;
  color: #4e5959;
  font-size: 14px;
}

.rightfunction-2 {
  width: 240px;
  height: 200px;
  background-color: #1171ee;
  border-radius: 3px;
  margin-bottom: 16px;
}

.rightfunction-2 img {
  width: 240px;
  height: 200px;
}

.rightfunction-3 {
  width: 240px;
  height: 74px;
  border-radius: 3px;
  margin-bottom: 16px;
}

.rightfunction-3 img {
  width: 240px;
  height: 74px;
}

.rightfunction-4 {
  width: 240px;
  height: 295px;
  background-color: white;
  margin-bottom: 16px;
}

.rightfunction-4-wiriter {
  font-size: 13.92px;
  color: #333333;
  position: relative;
  left: 15px;
  top: 12px;
  margin-bottom: 15px;
}

.rightfunction-4-people img:nth-child(1) {
  width: 240px;
  height: 75px;
}

.rightfunction-4-people img:nth-child(2) {
  width: 240px;
  height: 69.6px;
  position: relative;
  left: 1px;
}

.rightfunction-4-people img:nth-child(2) {
  width: 240px;
  height: 75px;
}

.rightfunction-4-item {
  text-align: center;
  color: #007fff;
  font-size: 14px;
}

.rightfunction-4-item > a {
  text-decoration: none;
}

.rightfunction-4-item:hover {
  cursor: pointer;
}

.rightfunction-5 {
  width: 240px;
  height: 180px;
  background-color: white;
  margin-bottom: 16px;
}

.rightfunction-5 img:nth-child(1) {
  width: 240px;
  height: 60px;
}

.rightfunction-5 img:nth-child(2) {
  width: 240px;
  height: 60px;
}

.rightfunction-5 img:nth-child(2) {
  width: 240px;
  height: 60px;
}

.rightfunction-6 {
  width: 240px;
  height: 190px;

  margin-bottom: 26px;
}

.rightfunction-6 a {
  color: #909090;
  font-size: 12px;
  text-decoration: none;
}

.rightfunction-6 div {
  color: #909090;
  font-size: 12px;
  text-decoration: none;
  margin-bottom: 0;
}

.rightfunction-7 {
  margin-top: 10px;
  width: 240px;
  height: 24px;
}

.rightfunction-7 img {
  width: 24px;
  height: 24px;
}

.float {
  width: 123px;
  height: 106.2px;
  background-color: white;
  position: absolute;
  left: 1165px;
  top: 58px;
  border-radius: 3px;
  display: none;
}

.float img {
  width: 123px;
  height: 35.4px;
}
</style>